<template>
    <div class="outSideContainer">
        <div class="containerTop">

        </div>
        <div class="containerBottom">
            <div class="leftContent">
                <div class="groupCheckBox">

                </div>
                <div class="leftContent-onSide">
                    <div class="leftContent-onSide-top">
                        <div class="titleBlock"></div>
                    </div>
                    <div class="leftContent-onSide-center">
                        <div class="titleBlock"></div>
                    </div>
                    <div class="leftContent-onSide-bottom">
                        <div class="titleBlock"></div>
                    </div>
                </div>
            </div>
            <div class="centerContent">
                <div class="centerContent-top">

                </div>
                <div class="centerContent-bottom">
                    <div class="titleBlock"></div>
                    <div class="centerContent-bottom-line">
                        <div id="centerLine"></div>
                    </div>
                </div>
            </div>
            <div class="rightContent">
                <div class="groupCheckBox">

                </div>
                <div class="rightContent-onSide">
                    <div class="rightContent-onSide-top">
                        <div class="titleBlock"></div>
                    </div>
                    <div class="rightContent-onSide-center">
                        <div class="titleBlock"></div>
                    </div>
                    <div class="rightContent-onSide-bottom">
                        <div class="titleBlock"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        
    },
    mounted() {
        console.log(this);
    },
}
</script>

<style scoped>
.groupCheckBox{
    height: 30px;
    width: 100%;
}
.outSideContainer {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    /* background: url('@assets/afzImgs/编组2.png') fixed; */
}
.containerTop{
    height: 50px;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.containerBottom{
    height: calc(100% - 50px);
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.leftContent,.rightContent{
    height: 100%;
    width: 30%;
    display: flex;
    flex-flow: column nowrap;
}
.centerContent{
    height: 100%;
    width: 39%;
    margin: 1% 10px 0px 10px;
    display: flex;
    flex-flow: column nowrap;
}
.leftContent-onSide,.rightContent-onSide{
    height: calc(100% - 30px);
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.centerContent-top{
    height: 60%;
    width: 100%;
}
.centerContent-bottom{
    height: calc(40% - 10px);
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}

</style>